<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<progress value="50" width="100px" height="20px" max="100"></progress>
		
		<script type="text/javascript">
			
			var audioContext = new (window.AudioContext||window.webkitAudioContext)();
			var xhr = new XMLHttpRequest();
			var src = "lesson.mp3";
			
			xhr.open("get",src,true);
			
			xhr.send();
			
			xhr.addEventListener('readystatechange',function(e){
				var res = e.target;
				if(res.readyState==4){
					if(res.state==200){
						console.log("请求成功");
					}
				}
			})
			
			var progress = document.getElementsByTagName('progress')[0];
			
			xhr.addEventListener('progress',function(e){
				console.log(e);
				if(event.lengthComputable){
					progress.setAttribute('value',event.loaded);
					progress.setAttribute('max',event.total);
				}
			})
			
			
//			xhr.onload = function(){
//				//得到二进制类型文件后进行解码
//				var data = xhr.response;
//				console.log(data);
//				audioContext.decodeAudioData(data,function(buffer){
//					//创建内存音频资源
//					var source = AudioContext.createBufferSource();
//					source.buffer = buffer;
//					//链接
//					source.connect(AudioContext.destination);
//					//循环
//					source.loop = true;
//					//播放
//					source.start();
//				},function(err){
//					console.log(err);
//				})
//			}
			
		</script>
		
	</body>
</html>
